<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <title>View Event</title>
</head>

<body>
${tmpl_context.fb()}
<div class="grid_12">
    ${sidebar_left()}
    <div class="grid_9 omega">
        <div class="grid_9" id="top_actions">
            <a href="${tg.url('/record/view/')}${event.record_id}#events">Back to Record</a> |
            <a href="${tg.url('/event/delete/')}${event.event_id}">Delete</a> | Event Achieved?
            <input py:if="event.achieved" type="checkbox" id="achieved" name="event_achieved" checked="checked" />
            <input py:if="not event.achieved" type="checkbox" id="achieved" name="event_achieved" />
        </div>
        
        <div class="grid_9">${tmpl_context.event_form}</div>
        <div class="grid_9">
            <div class="grid_3 alpha">
                <a class="iframe" href="${tg.url('/reminder/iframe/')}${event.event_id}">Add Reminder</a>
            </div>
            <div class="grid_3 omega">
                <a href="${tg.url('/record/view/')}${event.record_id}#events">Add New Event</a>
            </div>
        </div>
        <div class="grid_9"><h3>Existing Reminders</h3></div>
        <form id="reminder_handler">
        <div class="grid_9">Ascending <input type="radio" value="a" name="order" checked="checked" id="sortA"/> Descending <input type="radio" value="d" name="order" id="sortD"/> | Show old reminders? <input type="checkbox" id="showOld" /></div>
        </form>
        <div id="reminders" class="grid_9"></div>
        <!--<div py:for="r in event.reminders" class="grid_9">${r.message}</div>-->
    </div>  
</div>
<script type="text/javascript">
/*<![CDATA[*/

function makeDivClickable(div_id,reminder_id) {
    $("#"+div_id).click(function() {
        //window.location = $(this).find("h3:first a:first").attr("href");
        alert(reminder_id);
    });
}

function deleteReminder(reminder_id) {
    $.getJSON("/reminder/delete/"+reminder_id, function(data) {
        if (data.delete_status == 'ok') {
                $('#display_'+reminder_id).fadeOut(800);
            }
    });
}

function markAchieved(event_id) {
    $.getJSON("/event/markAchieved/"+event_id, function(data) {
        if (data.mark_status == 'ok') {
                $('#achieved').attr('checked',true);
                $('#top_actions_'+reminder_id).fadeOut(800);
            }
    });
}

function markNotAchieved(event_id) {
    $.getJSON("/event/markNotAchieved/"+event_id, function(data) {
        if (data.mark_status == 'ok') {
                $('#achieved').attr('checked',false);
                $('#top_actions_'+reminder_id).fadeOut(800);
            }
    });
}

function refreshReminders(sortdir,showOld) {
  if (sortdir==undefined) { sortdir = 'a';}
  if (showOld==undefined) { showOld = 1;}
  // need to insert threshold as a valid arg to refreshReminders function
  $.getJSON("/reminder/refresh/${event.event_id}?order="+sortdir+"&old="+showOld, function(data) {
    var holder = "";
    var keeper = new Array();
    $.each(data.reminders,function() {
        var msg = this['message'];
        var trigger = this['triggerDate']
        var reminder_id = this['reminder_id'];
        var reminder_status = this['status'];
        var status_img_link = "";
        var status_alt = "";
        if (reminder_status == '0') {
                status_img_link = "/images/reminder_pending_16x16.png";
                status_alt = "Pending";
            }
        else if (reminder_status == '1') {
                status_img_link = "/images/reminder_sent_16x16.png";
                status_alt = "Sent";
            }
        else {
                status_img_link = "/images/bug_16x16.png";
                status_alt = "Failed";
            }
        var h = '<div class="grid_9" id="display_'+reminder_id+'"><div class="grid_1 alpha"><a href="#" id="'+reminder_id+'" onclick="deleteReminder('+reminder_id+')"><img src="/images/delete.png" alt="Delete Reminder" /></a></div><div class="grid_1"><img src="'+status_img_link+'" style="border-width:0" alt="'+status_alt+'" /></div><div class="grid_1">'+trigger+'</div><div class="grid_6 omega">'+msg+'</div></div>';
        holder = holder + h;
        keeper.push(reminder_id);
        });
    $("#reminders").html(holder);
    $.each(keeper,function() {
            var mdiv = "display_"+this;
            makeDivClickable(mdiv,this);
        });
    //$("#reminders").html(data);
    //window.setTimeout(refreshReminders, 10000);
  });
}

$(document).ready(function(){
    refreshReminders('a',1);/* show old by default */
    $('#achieved').click(function() {
        // check if it has been checked or unchecked
        var isChecked = $('#achieved').is(':checked');
        if (isChecked == true) {
            markAchieved(${event.event_id})
        }
        else {
            markNotAchieved(${event.event_id})
        }
    });
});

function getShowOldStatus() {
    var x = $("#showOld").is(':checked');
    if (x) {
        return 1;
    }
    else {
        return 0;
    }
}

function getSortDir() {
  var the_value;
  the_value = $('#reminder_handler input:radio:checked').val();
  return the_value;
}

$("#sortA").click(function () {
    var sort_dir = getSortDir();
    var show_old = getShowOldStatus();
    refreshReminders(sort_dir,show_old);
});

$("#sortD").click(function () {
    var sort_dir = getSortDir();
    var show_old = getShowOldStatus();
    refreshReminders(sort_dir,show_old);
});

$("#showOld").click(function () {
    var sort_dir = getSortDir();
    var show_old = getShowOldStatus();
    refreshReminders(sort_dir,show_old);
});

$("div[ id ^= 'remdiv_' ]").click(function() {
    alert("ole");
    });

/*]]>*/
</script>
</body>
</html>
